<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>衣服相册</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		ul li {
			float: left;
			margin-right: 20px;
			margin-top: 20px;
			height: 50px;
			width: 50px;
			border: 2px solid #fff;
		}
		.active {
			border: 2px solid red;
		}
		ul {
			list-style: none;
			overflow: hidden;
		}
	</style>
</head>
<body>
	<img src="images/1.png" id="bigImg">
	<ul>
		<li class="active"><a href="#"><img src="images/1.png" width="46" class="smallImg"></a></li>
		<li><a href="#"><img src="images/2.png" width="46" class="smallImg"></a></li>
		<li><a href="#"><img src="images/3.png" width="46" class="smallImg"></a></li>
		<li><a href="#"><img src="images/4.png" width="46" class="smallImg"></a></li>
		<li><a href="#"><img src="images/5.png" width="46" class="smallImg"></a></li>
	</ul>
	<script type="text/javascript">
		//1,获取事件源
		var bigImg =document.getElementById('bigImg');
		var smallImg =document.getElementsByClassName('smallImg');
		for (var i = 0;i<smallImg.length;i++) {
			//遍历集合给每个IMG标签添加事件
			smallImg[i].onmouseover=function(){
				for(var j=0;j<smallImg.length;j++){
					//li标签的类名置为空值
					smallImg[j].parentNode.parentNode.setAttribute('class','');
				}
				var smallImgSrc=this.getAttribute('src');
				bigImg.setAttribute('src',smallImgSrc);
				//给鼠标悬浮的img标签的父类标签添加类
				this.parentNode.parentNode.setAttribute('class','active');
			
			}
		}
	</script>
</body>
</html>